<template>
  <div class="index-home">
    <div class="selcet-date-box">
      <span @click="showSelectDia">{{selectedDate.getFullYear()}}.{{selectedDate.getMonth()+1}}</span>
      <span>
        <van-icon name="arrow-down" />
      </span>
    </div>
    <van-popup v-model="selectDiaBool" position="bottom">
      <van-datetime-picker
        v-model="pickerDate"
        type="year-month"
        title="选择年月日"
        @confirm="changeDate"
        @cancel="selectDiaBool = false"
      />
    </van-popup>
    <!-- 第一种：传一个日期进去 -->
    <calendar :selectedDate="selectedDate"></calendar>
    <!-- 第二种：传处理好的数据进去 -->
    <calendar_copy :dateArr="dateArr"></calendar_copy>
  </div>
</template>
<script>
import calendar from '../components/calendar.vue'
import calendar_copy from '../components/calendar_copy.vue'
import {
  isWeekend,
  getDateYear,
  getDateMonth,
  getMonthDay,
  getMonthFirstDayOrder,
  getPrevMonthDay
} from '../utils/calendar'
import dayjs from 'dayjs'
var isSameOrBefore = require('dayjs/plugin/isSameOrBefore')
dayjs.extend(isSameOrBefore)
export default {
  components: { calendar, calendar_copy },
  data() {
    return {
      selectedDate: new Date(),
      //因为vant组件在选择的时候会立即改变，而不是点击确定的时候 所以设置一个新的值 当confirm时再改变
      pickerDate: new Date(),
      selectDiaBool: false,
      dateArr: []
    }
  },
  watch: {
    selectedDate: {
      handler(newVal) {
        this.initMonthData(newVal)
      },
      immediate: true
    }
  },
  methods: {
    showSelectDia() {
      this.selectDiaBool = true
    },
    changeDate(date) {
      this.selectedDate = date
      this.selectDiaBool = false
    },
    // 初始化日历数据
    initMonthData(date) {
      this.dateArr = [[], [], [], [], [], []]
      let firstDayOrder = getMonthFirstDayOrder(date)
      let selectedYear = getDateYear(date)
      let selectedMonth = getDateMonth(date)
      let selectedMonthDay = getMonthDay(date)
      let prevMonthDay = getPrevMonthDay(date)
      let selectedCountDay = 0
      let nextMonthCountDay = 0
      let isNextMonth = false
      for (let weekIndex = 0; weekIndex < 6; weekIndex++) {
        for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
          if (weekIndex === 0) {
            // 第一周需要对某一个月第一天做定位
            if (firstDayOrder <= dayIndex) {
              // 当前月
              selectedCountDay += 1
              this.$set(this.dateArr[weekIndex], dayIndex, {
                date: new Date(
                  selectedYear,
                  selectedMonth - 1,
                  selectedCountDay
                ),
                status: {
                  isCurr: true,
                  isPrev: false,
                  isNext: false,
                  isWeekend: isWeekend(
                    new Date(selectedYear, selectedMonth - 1, selectedCountDay)
                  )
                }
              })
            } else {
              // 上个月 因为选择月份是当前月 上个月需要减去1 然后new Date()还需要再减去1
              let prevMonth = selectedMonth === 1 ? 11 : selectedMonth - 2
              let prevMonthYear =
                selectedMonth - 1 === 0 ? selectedYear - 1 : selectedYear
              this.$set(this.dateArr[weekIndex], dayIndex, {
                date: new Date(
                  prevMonthYear,
                  prevMonth,
                  prevMonthDay - firstDayOrder + dayIndex + 1
                ),
                status: {
                  isCurr: false,
                  isPrev: true,
                  isNext: false,
                  isWeekend: isWeekend(
                    new Date(
                      prevMonthYear,
                      prevMonth,
                      prevMonthDay - firstDayOrder + dayIndex + 1
                    )
                  )
                }
              })
            }
          } else {
            selectedCountDay += 1
            isNextMonth = selectedCountDay > selectedMonthDay
            if (!isNextMonth) {
              // 当前月
              this.$set(this.dateArr[weekIndex], dayIndex, {
                date: new Date(
                  selectedYear,
                  selectedMonth - 1,
                  selectedCountDay
                ),
                status: {
                  isCurr: true,
                  isPrev: false,
                  isNext: false,
                  isWeekend: isWeekend(
                    new Date(selectedYear, selectedMonth - 1, selectedCountDay)
                  )
                }
              })
            } else {
              // 下个月
              let nextMonth = selectedMonth === 12 ? 0 : selectedMonth
              let nextYear =
                selectedMonth === 12 ? selectedYear + 1 : selectedYear
              nextMonthCountDay += 1
              this.$set(this.dateArr[weekIndex], dayIndex, {
                date: new Date(nextYear, nextMonth, nextMonthCountDay),
                status: {
                  isCurr: false,
                  isPrev: false,
                  isNext: true,
                  isWeekend: isWeekend(
                    new Date(nextYear, nextMonth, nextMonthCountDay)
                  )
                }
              })
            }
          }
        }
      }
      while (
        getDateMonth(this.dateArr[this.dateArr.length - 1][0].date) !==
        selectedMonth
      ) {
        // 某些月份不用六个星期 去除最后一个
        this.dateArr.pop()
      }
      this.handleMonthData(this.dateArr)
    },
    // 模拟接口数据
    handleMonthData(arr) {
      arr.forEach(item => {
        item.forEach((childItem, index) => {
          this.$set(childItem, 'showPopover', false)
          if (dayjs(childItem.date).isSameOrBefore(new Date(), 'day')) {
            childItem.value = {
              visits: 2,
              clockIn: index % 2 === 0 ? 1 : 0
            }
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.index-home {
  padding: 0 38px;
  background-color: #eeeeee;
  height: 200vh;
}
.selcet-date-box {
  font-size: 40px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #17204d;
  line-height: 58px;
}
</style>